<script setup>
// 引入 api
import { ref } from "vue";

// 内容
const content = ref("");

// 用户名
const userName = ref("");

// 密码
const passWord = ref("");

// 点击函数
function btn() {
    if (userName.value === "" || passWord.value === "") {
        if (userName.value === "") {
            return (content.value = "请输入用户名");
        }
        if (passWord.value === "") {
            return (content.value = "请输入密码");
        }
    }

    return (content.value = "登录成功");
}
</script>

<template>
    <!-- 表单 -->
    <form @submit.prevent="btn">
        <input type="text" placeholder="用户名" v-model.trim="userName" />
        <br />
        <input type="password" placeholder="密码" v-model.trim="passWord" />
        <br />
        <input type="submit" value="提交" />
    </form>

    <!-- 渲染 -->
    <p>{{ content }}</p>
</template>